<template>
    <div style="width: 99%;overflow: auto">
        <div>
            <el-button @click="handlePrint">打 印</el-button>
            <el-button @click="handleRest" class="fiexd-btn">刷 新</el-button>
        </div>
        <el-row type="flex" justify="space-between" class="mb-10">
            <span>Vesset:{{ info.shipName }}</span>
            <span>VoyNo:{{ info.voyage }}</span>
            <span>Nationlity:PRC</span>
            <span>Port of loading:{{ info.portName }}</span>
            <span>Loading completed on:{{ info.taskTime }}</span>
        </el-row>
        <!--//LTT-->
        <div style="display: flex;flex-direction: column-reverse">
            <div v-for="(row,r) in maxRow" class="print-flex stowage-row stowage-reverse">
                <div v-for="(bay,b) in row" class="stowage-bay" v-if="b%2===0">
                    <div v-for="(tier,t) in bay" class="stowage-tier" style="position: relative">
                        <div v-if="tier.bayNo%2!==0" class="">
                            <div v-show="tier.containerId">{{ tier.containerId }}</div>
                            <div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}
                                <span v-if="tier.ef === 'F'" style="font-size:unset">/{{ tier.weight }}T</span>
                            </div>
                        </div>
                        <div v-else class="stowage-even" :style="'display:'+tier.style">
                            <div v-show="tier.containerId">{{ tier.containerId }}</div>
                            <div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}
                                <span v-if="tier.ef === 'F'" style="font-size:unset">/{{ tier.weight }}T</span>
                            </div>
                        </div>

                        <!--<div v-show="tier.containerId">{{ tier.containerId }}</div>-->
                        <!--<div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}</div>-->
                        <div v-show="r===0&&t===0" class="stowage-no">
                            <!--{{ b+1 }}--> {{ (b/2)+1 }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-20">
            <span>Actual Total: 外贸
                <span v-if="form.size2e>0">{{ form.size2e }}*20E</span>
                <span v-if="form.size4e>0">{{ form.size4e }}*40E</span>
                <span v-if="form.size2>0">{{ form.size2 }}*20F</span>
                <span v-if="form.size4>0">{{ form.size4 }}*40F</span>
                ，内贸
                <span v-if="form.insize2e>0">{{form.insize2e}}*20E</span>
                <span v-if="form.insize4e>0">{{form.insize4e}}*40E</span>
                <span v-if="form.insize2>0">{{form.insize2}}*20F</span>
                <span v-if="form.insize4>0">{{form.insize4}}*40F</span>
            </span>
            <div>Remark:{{ form.remark }}</div>
        </div>
    </div>
</template>

<script>
    import { getStowage } from "@/api/shipPlan/shipPlan";

    export default {
        name: "stowage",
        props: {
            info: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                id: '',
                table: [],
                maxRow: 0,
                maxBay: 0,
                maxTier: 0,
                form: {}
            }
        },
        mounted() {
            // this.loadData()
        },
        methods: {
            loadData() {
                getStowage(this.id).then(res => {
                    console.log(res)
                    this.table = res.data.container
                    this.form = res.data
                    let get = {
                        maxRow: res.data.maxRow,
                        maxBay: res.data.maxBay,
                        maxTier: res.data.maxTier,
                    }
                    let tier = [];
                    for (let i = 0; i < get.maxRow; i++) {
                        tier.push({
                            containerNo: "",
                            type: "",
                        });
                    }
                    let bay = [];
                    for (let i = 0; i < get.maxBay + 1; i++) {
                        bay.push(tier);
                    }
                    let row = [];
                    for (let i = 0; i < get.maxTier; i++) {
                        row.push(bay);
                    }
                    this.maxRow = JSON.parse(JSON.stringify(row))
                    let newBay = res.data.container;
                    for (let i = 0; i < newBay.length; i++) {
                        if (newBay[i].bayNo % 2 === 0) {
                            this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo)]
                                .splice(
                                    newBay[i].rowNo - 1,
                                    1,
                                    {
                                        containerId: newBay[i].containerId,
                                        containerType: newBay[i].containerType,
                                        ef: newBay[i].ef,
                                        bayNo: Number(newBay[i].bayNo),
                                        weight: newBay[i].weight,
                                    }
                                );
                            this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) + 1]
                                .splice(
                                    newBay[i].rowNo - 1,
                                    1,
                                    {
                                        containerId: newBay[i].containerId,
                                        containerType: newBay[i].containerType,
                                        ef: newBay[i].ef,
                                        bayNo: Number(newBay[i].bayNo),
                                        weight: newBay[i].weight,
                                        style: "none"
                                    }
                                );
                            // console.log(newBay[i].tierNo - 1)
                            // console.log(newBay[i].bayNo - 1)
                            // console.log(newBay[i].rowNo - 1)
                            // console.log(this.maxRow)
                            // console.log(this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) - 1][newBay[i].rowNo - 1])
                            // console.log(this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) + 1][newBay[i].rowNo - 1])
                        } else {
                            // console.log(newBay[i]);
                            // console.log(newBay[i].rowNo);
                            this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) - 1]
                                .splice(
                                    newBay[i].rowNo - 1,
                                    1,
                                    {
                                        containerId: newBay[i].containerId,
                                        containerType: newBay[i].containerType,
                                        ef: newBay[i].ef,
                                        weight: newBay[i].weight,
                                        bayNo: Number(newBay[i].bayNo)
                                    }
                                );
                        }
                    }
                    // console.log(this.maxRow)
                })
            },
            handlePrint() {
                const origin = window.location.origin + window.location.pathname
                const route = "#/stowage/"
                window.open(`${origin}${route}${this.id}`);
            },
            handleRest() {
                this.loadData();
            }
        },
        filters: {
            odd(index) {
                let newVal = index + 1;
                let val = newVal + index
                if (val < 10) {
                    return "0" + val;
                } else {
                    return val;
                }
            },
        }
    }
</script>

<style scoped>
    .stowage-row {
        margin-bottom: 10px;
        border-left: 1px solid;
    }

    .stowage-reverse {
        justify-content: flex-end;
        flex-direction: row-reverse;
    }

    .stowage-bay {
        width: 90px;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        border-top: 1px solid;
    }

    .stowage-tier {
        border-bottom: 1px solid;
        border-right: 1px solid;
        height: 35px;
        font-size: 8px;
        text-align: center;
        min-width: 90px;
    }

    .stowage-no {
        position: absolute;
        top: 50px;
        left: 30px;
        transform: translate(-50%, -50%);
    }

    .stowage-even {
        min-width: 146px;
        position: relative;
        z-index: 88;
        background: #fff;
        height: 35px;
        left: 1px;
    }
    .fiexd-btn {
        position: fixed;
        right: 10px;
        top: 200px;
        position: fixed;
        right: 10px;
        top: 200px;
        background-color: bisque;
    }
</style>
